Skip to content

Update no-side-effects-in-computed-properties.md #480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 11, 2018

Conversation

SketchBookkeeper
Copy link
Contributor

Provide more details on working with arrays inside computed properties.

Provide more details on working with arrays inside computed properties.
@SketchBookkeeper
Copy link
Contributor Author

Vue newbie here, It just took me a minute to figure out how the correct example compared to the incorrect one. Thought some clarification here could be helpful.

Copy link
Member

@michalsnik michalsnik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect! Thank you @SketchBookkeeper :)

@michalsnik michalsnik merged commit 8ea21c8 into vuejs:master Jul 11, 2018
@infintesimal
Copy link

Hi all. Newbie here, I hope what i report is not a "problem exists between keyboard and chair." I encountered this eslint message while trying out some code where a user can both sort tabular data and provide form based input (checkboxes (for select, delete, update behaviors downstream)). I understand not mutating original arrays, but.....I also use events in vue to communicate from a child component (a data row) to the parent app that a checkbox has been changed. But....by not mutating the row level data in the child, I need to pass along positional data for which row has been checked. And here's the gotcha: when I use this.mydata.slice().sort(...) to sort the tabular data, when I try to update a row, the wrong row gets updated as the event handler for the checkbox being checked is acting on the original data rows and thee original data rows don't necessarily appear in the same order. So I feel stuck between a rock and a hard place. I can ignore the eslint warning b/c in the case of my app, it's not a side effect, it is the desired effect; or, I can try to please the linting gods and maybe pass a reference to the sorted array into the checkbox handler? Ultimately though, I need to send data back to my server that marks certain rows for various CRUD operations.
I could introduce a lot of complexity and used indexedDB and maintain a relational model between checked rows I suppose? Seems overkill though for the simple CRUD ops I am after.
Suggestions and criticisms of my code are welcome.
Here is a working fiddle that introduces the "side effect": http://jsfiddle.net/Loh5kyzt/10/
And here is the fiddle where I sort the slice() rather than the orginal data. http://jsfiddle.net/075ptnka/1/
Notice in the latter fiddle I place a comment on the line (line no. 65) that is in the check event handler that shows where/why my checkbox isn't sticking when I use slice.

At the end of the day, my "master" data does need to be correctly updated. What is the right way of going about it?

Thanks,
Steve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants